<template>
    <div class="add-paper-left box-border transparent">
      <el-row v-for="(data,index) in ques" :key="index">
        <ques-item :data="data" :index="index" />
      </el-row>
      <div class="box-border" style="font-size: 18px;background: white;padding: 10px 20px">
        <el-row>
          <el-col align="left" :span="12">
            总题数:
          </el-col>
          <el-col :span="12" align="left">
            <span class="text-brand" >{{sumCount}}</span> &nbsp;题
          </el-col>
        </el-row>
        <el-row>
          <el-col align="left"  :span="12">
            当前总分:
          </el-col>
          <el-col  :span="12" align="left">
            <span class="text-brand" >{{sumScore}}</span> &nbsp;分
          </el-col>
        </el-row>
      </div>
    </div>
</template>

<script>
import QuesItem from './QuesItem'
export default {
  data () {
    return {
    }
  },
  computed: {
    sumCount () {
      let sumCount = 0
      this.ques.forEach((item) => {
        sumCount += parseInt(this.itemCount(item))
      })
      return sumCount
    },
    sumScore () {
      let sumScore = 0
      this.ques.forEach((item) => {
        sumScore += (this.itemCount(item) * item.perScore)
      })
      return sumScore
    }
  },
  methods: {
    itemCount (item) {
      return item.simpleCount + item.normalCount + item.complexCount
    }
  },
  props: {
    ques: {
      type: Array,
      required: true
    }
  },
  watch: {
    ques (ques) {
    }
  },
  model: {
    prop: 'ques',
    event: 'change'
  },
  components: {
    QuesItem
  }
}
</script>

<style scoped lang="less">
  .add-paper-left {
    width: 300px;
    padding: 10px 25px;
  }
</style>
